<template>
    <div>
        <div class="container">
            <el-table :data="tableData" border class="table" ref="singleTable" header-cell-class-name="table-header">
                <el-table-column type="index" label="序号" width="55" align="center"></el-table-column>
                <el-table-column label="内容" align="center">
                    <template #default="scope">
                        <p v-show="!scope.row.isEdit">{{ scope.row.content }}</p>
                        <el-input :rows="2" type="textarea" v-model.trim="scope.row.content" v-if="scope.row.isEdit"/>
                    </template>
                </el-table-column>
                <el-table-column label="开始时间" align="center">
                    <template #default="scope">
                        <el-time-select v-model="scope.row.startTime" :disabled="!scope.row.isEdit"
                                        :clearable='false' step="00:01" :max-time="scope.row.endTime"></el-time-select>
                    </template>
                </el-table-column>
                <el-table-column label="结束时间" align="center">
                    <template #default="scope">
                        <el-time-select v-model="scope.row.endTime" :disabled="!scope.row.isEdit"
                                        :clearable='false' step="00:01" :min-time="scope.row.startTime">
                        </el-time-select>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="180" align="center">
                    <template #default="scope">
                        <el-button type="primary" @click="edit(scope.row)" v-if="!scope.row.isEdit">编辑</el-button>
                        <el-button type="primary" @click="save(scope.row)" v-show="scope.row.isEdit">保存</el-button>
                        <el-button class="red" @click="remove(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination background layout="total" :total=tableData.length></el-pagination>
            </div>
            <div align="center">
                <el-button type="primary" round @click="add">添加提示内容</el-button>
                <el-switch class="switch"
                  v-model="switchValue"
                  size="large"
                  active-text="声音开启"
                  inactive-text="声音关闭"
                           @change="switchChange"
                />
            </div>
        </div>
        <!-- 编辑弹框 -->
        <el-dialog title="添加提示内容" v-model="editVisible" width="25em">
            <el-alert class="alert" title="请勿添加重复内容" type="info" :closable="false"/>
            <el-form label-width="25%">
                <el-form-item label="内容">
                    <el-input type="textarea" :rows="2" v-model.trim="editForm.content"/>
                </el-form-item>
                <el-form-item label="开始时间">
                    <template #default="">
                        <el-time-select
                          v-model="editForm.startTime"
                          :clearable="true"
                          start="08:00" step='00:01' end="23:00"
                          :max-time="editForm.endTime"
                        >
                        </el-time-select>
                    </template>
                </el-form-item>
                <el-form-item label="结束时间">
                    <template #default="">
                        <el-time-select
                          v-model="editForm.endTime"
                          :clearable="false"
						  start="08:00" step='00:01' end="23:00"
                          :min-time="editForm.startTime"
                        >
                        </el-time-select>
                    </template>
                </el-form-item>
                <!-- <el-form-item label="开始时间">
                  <template #default="">
                    <el-time-picker v-model="editForm.startTime"
                    format="HH:mm"
                    :disabled-hours="disabledHours"
                                :disabled-minutes="disabledMinutes"
                    placeholder="Arbitrary time">
                                </el-time-picker>
                  </template>
                </el-form-item>
                <el-form-item label="结束时间">
                  <template #default="">
                    <el-time-picker v-model="editForm.endTime"
                    format="HH:mm"
                    :disabled-hours="disabledHoursStop"
                                :disabled-minutes="disabledMinutes"

                    placeholder="Arbitrary time">
                                </el-time-picker>
                  </template>
                </el-form-item> -->


            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="editVisible = false" size="small">取消</el-button>
                    <el-button type="primary" size="small" @click="addSave(editForm)">确定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script>
import {ref, reactive} from "vue";
import {
    getReminderList,
    addReminder,
    updateReminder,
    removeReminder,
} from "../api/lobby";
import {setCorridor} from "../api/corridor";
import {ElMessage, ElMessageBox} from 'element-plus';
import {refreshFromHis} from "../api/refresh";

export default {
    name: "lobby",
    setup() {
        const switchValue=ref(false);
        //初始化窗口状态
        const editVisible = ref(false);
        //初始化表格数据
        let tableData = ref([]);
        //初始化弹窗表单内容
        let editForm = reactive({
            id: "",
            content: "",
            startTime: "",
            endTime: "",
        });

        const switchChange=()=>{
            setCorridor(switchValue.value).then((res)=>{
                if(res.data==true){
                }else {
                    switchValue.value=!switchValue.value;
                }
            })
        }
        const makeRange = (start, end) => {
            const result = []
            for (let i = start; i <= end; i++) {
                result.push(i)
            }
            return result
        }
        const disabledHours = () => {
            return makeRange(0, 7).concat(makeRange(19, 23))
        }
        const disabledMinutes = (hour) => {
            if (hour === 18) {
                return makeRange(31, 59)
            }
        }
        const disabledHoursStop = () => {
            var HH = editForm.startTime.getHours
            return makeRange(0, HH).concat(makeRange(19, 23))
        }


        const getTableData = () => {
            //从后台Api读数据
            //#region
            getReminderList().then(res => {
                let list = res.data
                let temp = reactive([])
                for (let item of list) {
                    item = Object.assign(item, {isEdit: false});
                    temp.push(item);
                }
                tableData.value = temp;
            })
            //#endregion
            //#region
            //前端测试
            // let list = reactive([{
            //   id:"",
            //   content:"内容1",
            //   startTime:"",
            //   endTime:"",
            //   cycle:"",
            // },{
            //   id:"",
            //   content:"内容2",
            //   startTime:"",
            //   endTime:"",
            //   cycle:"",
            // },{
            //   id:"",
            //   content:"内容3",
            //   startTime:"",
            //   endTime:"",
            //   cycle:"",
            // },])
            // for(var item of list){
            //   item = Object.assign({},item,{isEdit:false});
            //   tableData.push(item);
            // };
            //#endregion
        }

        //获取表格数据
        getTableData();

        const edit = (row) => {
            row.isEdit = true;
        }
        //定义保存操作
        const save = (row) => {
            row.isEdit = false;
            let row_ = reactive({
                id: "",
                content: "",
                startTime: "8:00",
                endTime: "23:00",
            })
            if (row.content === '') {
                ElMessage.error('内容不能为空，修改失败！');
                getTableData();
            } else {
                Object.keys(row_).forEach((item) => {
                    row_[item] = row[item];
                })
                updateReminder(row_).then((res) => {
                    if (res.data === true) {
                        ElMessage.success('修改成功');
                        //重新加载实现刷新页面效果 可以删掉 不需要重新渲染页面
                        // getTableData();
                    } else {
                        ElMessage.error('修改失败，请稍后重试！');
                    }
                }).catch(() => {
                    ElMessage.error('服务器未启动或其它错误！');
                })
            }
        }
        const add = () => {
            editVisible.value = true;
        }
        //定义添加操作
        const addSave = (form) => {
            editVisible.value = false;
            //前端测试
            // tableData.value.push(form);
            //后端接口调用
            if (form.content === '') {
                editVisible.value = true;
                ElMessage.error('内容不能为空！');
            } else {
                addReminder(form).then((res) => {
                    if (res.data === true) {
                        ElMessage.success('添加成功');
                        getTableData();
                        Object.keys(editForm).forEach((item) => {
                            editForm[item] = '';
                        })
                    } else {
                        ElMessage.error('添加失败，请稍后重试！');
                    }
                }).catch(() => {
                    ElMessage.error('服务器未启动或其他错误！');
                })
            }
        }
        //定义删除操作
        const remove = (id) => {
            ElMessageBox.confirm(
              "确定要删除这条内容吗？", "提示", {
                  type: "warning",
              })
              .then(() => {
                  //向服务器发送删除请求
                  removeReminder(id)
                    .then(res => {
                        if (res.data === true) {
                            ElMessage.success("删除成功");
                            getTableData();
                        } else {
                            ElMessage.error("删除失败，请稍后再试！");
                        }
                    })
                    .catch(() => {
                        ElMessage.error('服务器未启动或其它错误！');
                    })
              })
              .catch(() => {
              });
        };

        return {
            tableData,
            editVisible,
            editForm,
            switchValue,
            switchChange,
            makeRange,
            disabledHours, disabledMinutes, disabledHoursStop,
            edit,
            save,
            add,
            addSave,
            remove,
        };
    },
};
</script>

<style scoped>
.table {
    width: 100%;
    font-size: 14px;
}

.red {
    color: #ff0000;
}

.alert {
    margin-bottom: 10px;
}

.switch{
    margin-left: 10px;
    margin-right: 10px;
}
</style>